<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition> 





        <p:panel  header="Mantenimiento de categorias" style="text-align: center;margin-bottom:10px;">
            <h:form id="form">
                <p:spacer width="1" height="20" />
                <p:messages id="mssgs"  showDetail="true" closable="true" autoUpdate="true"/>
                <h:panelGrid columns="9" style="margin: auto" >  
                    <p:outputLabel value="Ingresar nueva categoría"/>
                    <p:spacer width="40" height="10" />
                    <p:outputLabel value="Cat. padre"/>
                    <p:selectOneMenu id="bcParentCategory" value="#{backofficeCategoryManagedBean.categoryForInsert}" converter="CategoryConverter">  
                        <f:selectItem itemLabel="Ninguna(Es cat. padre)" itemValue="" />  
                        <f:selectItems value="#{categoryManagedBean.parentsCategories()}" var="cat" itemLabel="#{cat.idCategory} - #{cat.name}" itemValue="#{cat.idCategory}" />  
                    </p:selectOneMenu> 
                    <p:spacer width="40" height="10" />
                    <p:outputLabel id="nameCategory" value="Nombre"/>
                    <p:inputText id="newName" value="#{backofficeCategoryManagedBean.categoryForInsert.name}" >
                        
                    </p:inputText>
                    <p:spacer width="20" height="10" />
                    <p:commandButton  title="Anadir" ajax="false" icon="ui-icon-circle-check" action="#{backofficeCategoryManagedBean.createCategory(backofficeCategoryManagedBean.categoryForInsert)}"> 

                    </p:commandButton>
                </h:panelGrid>

                <h:panelGrid  columns="1" style="margin: auto" >  
                    <c:forEach var="parentCat" items="#{categoryManagedBean.parentsCategories()}">
                        <p:spacer width="1" height="30" />
                        <p:separator/> 
                        <p:spacer width="1" height="30" />
                        <p:toolbar style="width: 530px">  

                            <p:toolbarGroup align="left" >  
                                <p:outputLabel value="#{parentCat.idCategory} - #{parentCat.name}" />
                            </p:toolbarGroup>  

                            <p:toolbarGroup align="right">  
                                <p:commandButton update=":form:displayParent" oncomplete="deleteParentDialog.show()" icon="ui-icon-trash" title="View" style="height: 20px">
                                    <f:setPropertyActionListener value="#{parentCat}" target="#{backofficeCategoryManagedBean.categoryForDelete}" />
                                </p:commandButton>
                            </p:toolbarGroup>

                        </p:toolbar>  
                        <p:dataTable value="#{backofficeCategoryManagedBean.childrenFor(parentCat)}" var="childCat">


                            <p:column headerText="Id" style="width: 85px;text-align: center">  
                                <h:outputText id="idCategoryLabel" value="#{childCat.idCategory}" />  
                            </p:column>  

                            <p:column headerText="Nombre" style="width: 350px">  
                                <h:outputText value="#{childCat.name}" />  
                            </p:column>  

                            <p:column  style="width:40px;text-align: center"> 
                                <p:commandButton  update=":form:display" oncomplete="deleteDialog.show()" icon="ui-icon-trash" title="View">
                                    <f:setPropertyActionListener value="#{childCat}" target="#{backofficeCategoryManagedBean.categoryForDelete}" />
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>



                    </c:forEach>
                </h:panelGrid>

                <p:dialog header="¿Está seguro de que desea eliminar  esta subcategoría?" widgetVar="deleteDialog" resizable="false" id="deleteDialog"
                          showEffect="clip" hideEffect="explode" modal="true" position="center top"><!-- position="505,250">-->

                    <h:panelGrid id="display" columns="1" cellpadding="4" style="margin:0 auto;">

                        <h:outputText value="La operación no se podrá deshacer." />
                        <h:panelGrid columns="3"  style="margin: auto;" >
                            <p:commandButton  id="cancelButton" onclick="deleteDialog.hide()" value="Cancelar"/>
                            <p:spacer width="30"/>
                            <p:commandButton id="deleteButton" actionListener="#{backofficeCategoryManagedBean.unsubscribeCategory(backofficeCategoryManagedBean.categoryForDelete)}" oncomplete="deleteDialog.hide()" 
                                             update=":form" value="Continuar"/>
                        </h:panelGrid>
                    </h:panelGrid>

                </p:dialog>

                <p:dialog header="¿Está seguro de que desea eliminar  esta categoría?" widgetVar="deleteParentDialog" resizable="false" id="deleteParentDialog"
                          showEffect="clip" hideEffect="explode" modal="true" position="center top">

                    <h:panelGrid id="displayParent" columns="1" cellpadding="4" style="margin:0 auto;">
                        <h:outputText value="Se eliminarán también todas las subcategorías"  style="font-weight: bold"/>
                        <h:outputText value="La operación no se podrá deshacer." />
                        <h:panelGrid columns="3"  style="margin: auto;" >
                            <p:commandButton  id="cancelParentButton" onclick="deleteParentDialog.hide()" value="Cancelar"/>
                            <p:spacer width="30"/>
                            <p:commandButton id="deleteParentButton" actionListener="#{backofficeCategoryManagedBean.unsubscribeCategory(backofficeCategoryManagedBean.categoryForDelete)}" oncomplete="deleteParentDialog.hide()" 
                                             update=":form" value="Continuar"/>
                        </h:panelGrid>
                    </h:panelGrid>

                </p:dialog>
            </h:form>



        </p:panel>

    </ui:composition>

</html>